<template>
  <div class="shop">
    <div class="header">
      <div class="h-img-div"><img :src="shopInfo.thumb" alt="" id="headimg" :onerror="errorImg01"></div>
      <div class="shop-info">
        <h1>{{shopInfo.name}}</h1>
        <span @click="changeStatus">{{shopStatusStr}}&nbsp;></span>
      </div>
    </div>
   
    <div class="wrapper" ref="askWrapper">
      <div class="content">
        <div class="shop-data">
          <div class="data-detail">
            <div class="data-cell">
              <h1>今日营业额</h1>
              <span>{{shopObj.today_money}}</span>
            </div>
            <div class="data-cell">
              <h1>今日订单数</h1>
              <span>{{shopObj.today_num}}</span>
            </div>
            <div class="data-cell">
              <h1>本月营业额</h1>
              <span>{{shopObj.month_money}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <mt-cell title="财务查询" to="/caiwu" is-link></mt-cell>
         
        </div>
        <div class="item">
          <mt-cell title="店铺设置" to="/shopsetting" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="优惠券管理" to="/coupon" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="商品分类" to="/category" is-link></mt-cell>
        </div>
        <div class="item" ref="printset" id="diva">
          <mt-cell title="打印机管理" id="a" is-link></mt-cell>
        </div>
        <div class="dengc">
          <mt-button type="primary" @click="toexit">退出登录</mt-button>
        </div>
      </div>
    </div>
    <calendar :show="calendarShow" format="yyyy-MM-dd" @selected="selectedHandler"></calendar>

  </div>
</template>

<script>
import { exit, saveHeadimg } from 'common/js/localStorage.js'
import axios from 'axios'
import BScroll from 'better-scroll'
import { Toast } from 'mint-ui'
import Calendar from 'vue-m-calendar';
import selectPicker from 'components/common/selectPicker.vue'

export default {
  data() {
    return {
      errorImg01: 'this.src="' + require('../.././assets/img_tx.jpg') + '"',
      shopObj: '',
      shopInfo: '',
      startdate: '',
      enddate: '',
      status: '',
      value: '',
      calendarShow: false,
      shopStatus: true,
      shopStatusStr: '',
      zMoney: '0'
    }
  },
  mounted() {
    var vueself = this;
      /*********************************hui*******************************************/

      mui.init({})
      //如果使用打印机，则初始化蓝牙设备以及打印机socket服务
      mui.plusReady(function () {

        /*****************************************************蓝牙基础类*******************************************/


        (function ($, owner, util) {

          util.WaitFor = function (condition, callback, timeout, unitTime) {
            // 设置默认等待时间（循环间隔）
            if (!unitTime || isNaN(unitTime)) {
              unitTime = 100;
            }
            // 设置超时（到达超时则返回）
            if (!timeout || isNaN(timeout)) {
              timeout = 100;
            }
            if (condition && condition()) { // 等待条件成立，则执行回调
              callback();
            } else if (timeout - unitTime <= 0) { // 等待超时，则执行回调
              callback();
            } else { // 设置延时等待操作
              setTimeout(function () {
                util.WaitFor(condition, callback, timeout - unitTime, unitTime);
              }, unitTime);
            }
          };

          owner.OutputStream = null;

          owner.init = function (BluetoothSocket) {
            owner.OutputStream = BluetoothSocket.getOutputStream();
            plus.android.importClass(owner.OutputStream);
          }

          // 设置字体大小
          owner.SetFontSize = function (n) {
            var font = [0x1D, 0X21, n]
            owner.OutputStream.write(font);
          };

          // 打印字符串
          owner.PrintString = function (string) {
            var bytes = plus.android.invoke(string, 'getBytes', 'gbk');
            owner.OutputStream.write(bytes);
          };

          // 打印字符串
          owner.getbyteslen = function (string) {
            var bytes = plus.android.invoke(string, 'getBytes', 'gbk');
            return bytes.length;
          };

          // 重置打印机
          owner.Reset = function () {
            var reset = [0x1B, 0X40];
            owner.OutputStream.write(reset);
          };

          // 设置居中对齐
          owner.setCenter = function () {
            var reset = [0x1B, 0x61, 0x01];
            owner.OutputStream.write(reset);
          };
          // 设置左对齐
          owner.setLeft = function () {
            var reset = [0x1B, 0x61, 0x00];
            owner.OutputStream.write(reset);
          };
          // 设置右对齐
          owner.setRight = function () {
            var reset = [0x1B, 0x61, 0x02];
            owner.OutputStream.write(reset);
          };
          // 打印下划线
          owner.Underline = function () {
            // 下划线指令
            var underline = [0x1b, 0x2d, 0x01];
            owner.OutputStream.write(underline);
          };

          // 结束打印
          owner.End = function () {
            owner.OutputStream.flush();
            var end = [0x1d, 0x4c, 0x1f, 0x00];
            owner.OutputStream.write(end);
          };

          // 打印图片（暂不可用）
          owner.Picture = function () {
            var picture = [0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1B, 0x40, 0x1B, 0x33, 0x00];
            // var picture = [0x1B, 0x2A];
            owner.OutputStream.write(picture);
          };

          // 切纸（暂不可用）
          owner.CutPage = function () {
            // 发送切纸指令
            var end = [0x1B, 0x69];
            owner.OutputStream.write(end);
          };
          // 条形码打印(暂不可用)
          owner.PrintBarcode = function (n) {
            var barcode = [0x1D, 0x6B, 65, 5, 11, 12, 3, 6, 23];
            owner.OutputStream.write(barcode);
          };
        }(mui, window.PrintUtil = {}, window.CommonUtil = {}))

        // 导入的java包
        var Context, BluetoothAdapter, BluetoothDevice;
        // 蓝牙服务与适配
        var BManager, BAdapter, BluetoothSocket, mDevice, receiver;
        var mMain, mUUID, UUID;

        var self = plus.webview.currentWebview();
        var use_printer = localStorage.getItem("use_printer");
        if (use_printer == 'y') {
          vueself.$refs.printset.style.setProperty("display", "block");

          // 打开蓝牙设备并扫描
          if (mui.os.android) {
            // 打开蓝牙
            openAndroidBluetooth();
          }


          /************************************初始化socket*******************************/
            // 连接服务端
          var socket = io(SOCKET_HOST);
          // 连接后登录
          var uid = localStorage.getItem('print_access_token');
          socket.on('connect', function () {
            socket.emit('login', uid);
          });
          // 后端推送打印新订单
          socket.on('print_order', function (order_no) {
            mui.ajax(PRINT_HOST + '/Api/check_print_status', {
              data: {order_no: order_no},
              dataType: 'json', //服务器返回json格式数据
              type: 'POST', //HTTP请求类型
              timeout: 10000, //超时时间设置为10秒；
              headers: {'Content-Type': 'application/json'},
              success: function (data) {
                if (data.result == "success") {}
                else {
                  var mac = plus.storage.getItem("device_mac");
                  //var audio = document.getElementById("bgMusic");
                  //播放(继续播放)
                  var p = plus.audio.createPlayer('../../js/order.mp3');
                  p.play(function () {}, function (e) {});
                  //打印订单
                  print_order(mac, order_no);
                }
              },
              error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                //异常处理；
                mui.toast("网络异常，请检测网络是否正常");
              }
            })


          });

          // 后端推送重试打印失败订单
          socket.on('attempt_print_order', function (order_no) {

            mui.ajax(PRINT_HOST + '/Api/check_print_status', {
              data: {
                order_no: order_no

              },
              dataType: 'json', //服务器返回json格式数据
              type: 'POST', //HTTP请求类型
              timeout: 10000, //超时时间设置为10秒；
              headers: {
                'Content-Type': 'application/json'
              },
              success: function (data) {
                if (data.result == "success") {

                }
                else {
                  var mac = plus.storage.getItem("device_mac");
                  //打印订单
                  print_order(mac, order_no);
                }
              },
              error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                //异常处理；
                mui.toast("网络异常，请检测网络是否正常");
              }
            })

          });
          // 后端推送来在线数据时
          socket.on('login_result', function (data) {
            //   mui.toast(data)
          });


          /************************************初始化socket_end*************************************/
        } else {
          vueself.$refs.printset.style.setProperty("display", "none");
        }

        /*****************************************************蓝牙基础类*******************************************/

        /**
         *打开蓝牙（Android）
         */
        function openAndroidBluetooth() {
          mMain = plus.android.runtimeMainActivity();
          Context = plus.android.importClass("android.content.Context");
          BManager = mMain.getSystemService(Context.BLUETOOTH_SERVICE);
          plus.android.importClass(BManager); //引入相关的method函数
          BAdapter = BManager.getAdapter();
          plus.android.importClass(BAdapter); //引入相关的method函数，这样之后才会有isEnabled函数支持
          if (!BAdapter.isEnabled()) {
            BAdapter.enable();
          }
        }

        /**
         *扫描蓝牙设备
         */
        function searchDevices() {
          //console.log("开始搜索设备");
          if (!BAdapter.isEnabled()) {
            plus.nativeUI.toast('请先打开蓝牙');
            return;
          }
          plus.nativeUI.showWaiting('正在搜索设备，请稍后...', {
            back: 'close' // 可取值"none"表示截获处理返回键，但不做任何响应；"close"表示截获处理返回键并关闭等待框；"transmit"表示不截获返回键，向后传递给Webview窗口继续处理（与未显示等待框的情况一致）。
          });
          //  vlist1.innerHTML = ''; //清空容器
          //  vlist2.innerHTML = ''; //清空容器
          // 初始化蓝牙广播接收器
          initReceiver();
          // 开启搜索
          BAdapter.startDiscovery();
          // 初始化广播信息过滤
          initIntentFilter();
        }

        function initReceiver() {
          BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
          var bdevice = new BluetoothDevice();
          receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
            onReceive: function (context, intent) { //实现onReceiver回调函数
              plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
              //console.log(intent.getAction()); //获取action

              if (intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
                mMain.unregisterReceiver(receiver); //取消监听
                //console.log("搜索结束")
                plus.nativeUI.closeWaiting();
              } else {
                BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
                //                      console.log(JSON.stringify(BluetoothDevice));
                //                      console.log(JSON.stringify(BleDevice));
                //判断是否配对
                if (BleDevice.getBondState() == bdevice.BOND_NONE) {
                  //console.log("未配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());
                  //if (!document.getElementById(BleDevice.getAddress())) { //判断防止重复添加
                  //  var li1 = genLi(BleDevice);
                  //vlist1.appendChild(li1);
                  // }
                } else {
                  // if (!document.getElementById(BleDevice.getAddress())) { //判断防止重复添加
                  //console.log("已配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());
                  //   var li2 = genLi(BleDevice);
                  //   vlist2.appendChild(li2);
                  //  }
                }
              }
            }
          });
        }

        function initIntentFilter() {
          // 设置广播信息过滤
          var IntentFilter = plus.android.importClass('android.content.IntentFilter');
          var filter = new IntentFilter();
          filter.addAction(BluetoothDevice.ACTION_FOUND);
          filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
          filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
          filter.addAction(BAdapter.ACTION_STATE_CHANGED);
          // 注册广播接收器，接收并处理搜索结果
          mMain.registerReceiver(receiver, filter);
        }

        /**
         * 获取已配对的蓝牙设备列表
         */
        function getConnectedDevices() {
          //          var main = plus.android.runtimeMainActivity();
          //          var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
          //          var BAdapter = BluetoothAdapter.getDefaultAdapter(); //获得本机蓝牙适配器
          if (!BAdapter.isEnabled()) {
            plus.nativeUI.toast('请先打开蓝牙');
            return;
          }
          var lists = BAdapter.getBondedDevices(); //获取配对的设备列表
          plus.android.importClass(lists);
          var iterator = lists.iterator();
          plus.android.importClass(iterator);
          //   var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
          while (iterator.hasNext()) {
            var d = iterator.next();
            plus.android.importClass(d);
            //    var li2 = genLi(d);
            //    vlist2.appendChild(li2);
          }
        }

        //配对设备
        function connect(mac_address) {
          // 查找蓝牙设备
          var unConnected = BAdapter.getRemoteDevice(mac_address);
          if (unConnected) {
            try {
              if (BleDevice.createBond()) { //配对命令.createBond()
                //console.log("配对成功");
                mui.toast('配对成功');
              }
            } catch (e) {

              mui.toast('连接到设备失败');
            }
          }
        }


        //mac_address:打印机的mac地址
        function print_order(mac_address, order_no) {
          console.log('start print');
          if (!mac_address) {
            mui.toast('请选择蓝牙打印机');
            return;
          }
          if (mDevice == null) {
            UUID = plus.android.importClass("java.util.UUID");
            mUUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
            mDevice = BAdapter.getRemoteDevice(mac_address);
            plus.android.importClass(mDevice);
            BluetoothSocket = mDevice.createInsecureRfcommSocketToServiceRecord(mUUID);
            console.log(JSON.stringify(BluetoothSocket));
          }
          plus.android.importClass(BluetoothSocket);
          if (!BluetoothSocket.isConnected()) {
            console.log('检测到设备未连接，尝试连接....');
            try {
              BluetoothSocket.connect();
            } catch (e) {
              console.log('打印机连接超时')
              //mui.toast('打印机连接超时');
              //更新订单打印状态为失败
              mui.ajax(PRINT_HOST + '/Api/update_print_status', {
                data: {
                  access_token: localStorage.getItem('print_access_token'),
                  order_no: order_no,
                  print_status: 'error',
                  printer_mac: mac_address,
                  error_msg: '打印机连接超时'
                },
                dataType: 'json', //服务器返回json格式数据
                type: 'POST', //HTTP请求类型
                timeout: 10000, //超时时间设置为10秒；
                headers: {
                  'Content-Type': 'application/json'
                },
                success: function (data) {
                  console.log(data.result);
                  if (data.result == "success") {
                    return;
                  } else {
                    return;
                  }
                },
                error: function (xhr, type, errorThrown) {
                  //异常处理；
                  //mui.toast("网络异常，请检测网络是否正常");
                }
              })
              return;
            }
          }
          // 防止蓝牙未完成连接时调用打印
          CommonUtil.WaitFor(
            function () { // 等待条件
              return BluetoothSocket.isConnected();
            },
            function () { // 回调方法
              if (!BluetoothSocket.isConnected()) {
                plus.nativeUI.toast('请连接打印机');
                return;
              } else {

                mui.post(HOST + '/Api/get_print_info', {
                  access_token: localStorage.getItem('access_token'),
                  order_no: order_no
                }, function (data) {
                  if (data.result == 'success') {
                    var goods = data.goods;
                    PrintUtil.init(BluetoothSocket);
                    PrintUtil.OutputStream.write[0x1D, 0x4C, 0x00, 0x00];
                    console.log(JSON.stringify(data));
                    var printStr = data.title + '\r\n';
                    PrintUtil.PrintString(printStr);
                    //下划线
                    PrintUtil.PrintString('-----------------------------');
                    // 打印字符串
                    PrintUtil.PrintString('订单时间：' + data.order_time + '\r\n');
                    PrintUtil.PrintString('订单号码：' + data.order_no + '\r\n');
                    PrintUtil.PrintString('购买人名:' + data.member_name + '\r\n');
                    PrintUtil.PrintString('购买电话:' + data.receiver_phone + '\r\n');
                    PrintUtil.PrintString('购买地址:' + data.receiver_address + '\r\n');
                    //预约
                    console.log('order_type' + typeof (data).order_type);
                    if (data.order_type == 2) {
                      if (data.appointment_type == 'out') {
                        PrintUtil.PrintString('就餐类型:预约带走 \r\n');
                        PrintUtil.PrintString('取餐时间:' + data.accept_time + '\r\n');
                      } else if (data.appointment_type == 'inner') {
                        PrintUtil.PrintString('就餐类型:预约就餐 \r\n');
                        PrintUtil.PrintString('就餐时间:' + data.accept_time + '\r\n');
                      }
                    }
                    if (data.order_type == 1) {
                      PrintUtil.PrintString('就餐类型:外卖配送 \r\n');
                    }
                    PrintUtil.PrintString('下单备注:'+data.description+'\r\n');
                    PrintUtil.PrintString('-----------------------------');
                    PrintUtil.PrintString('商品\t\t');
                    PrintUtil.PrintString('数量\t');
                    PrintUtil.PrintString('金额\r\n');
                    goods.forEach(function (v) {
                      PrintUtil.PrintString(v.goods_name + '\t');
                      PrintUtil.PrintString(v.total_num + '\t');
                      PrintUtil.PrintString(v.total_fee);
                      PrintUtil.PrintString('\r\n');
                    })
                    //下划线
                    PrintUtil.PrintString('-----------------------------');
                    PrintUtil.PrintString('总金额：' + data.total_fee + '\n\n\n\n\n');
                    // 结束打印
                    PrintUtil.End();
                    //更新订单打印状态为成功
                    mui.ajax(PRINT_HOST + '/Api/update_print_status', {
                      data: {
                        access_token: localStorage.getItem('print_access_token'),
                        order_no: order_no,
                        print_status: 'success',
                        printer_mac: mac_address,
                        error_msg: '打印成功'
                      },
                      dataType: 'json', //服务器返回json格式数据
                      type: 'POST', //HTTP请求类型
                      timeout: 10000, //超时时间设置为10秒；
                      headers: {'Content-Type': 'application/json'},
                      success: function (data) {
                        if (data.result == "success") {

                        } else {

                        }
                      },
                      error: function (xhr, type, errorThrown) {
                        //异常处理；
                        //mui.toast("网络异常，请检测网络是否正常");
                      }
                    })

                  } else {

                    //更新订单打印状态为失败
                    mui.ajax(PRINT_HOST + '/Api/update_print_status', {
                      data: {
                        access_token: localStorage.getItem('print_access_token'),
                        order_no: order_no,
                        print_status: 'error',
                        printer_mac: mac_address,
                        error_msg: data.message
                      },
                      dataType: 'json', //服务器返回json格式数据
                      type: 'POST', //HTTP请求类型
                      timeout: 10000, //超时时间设置为10秒；
                      headers: {
                        'Content-Type': 'application/json'
                      },
                      success: function (data) {
                        if (data.result == "success") {

                        } else {

                        }
                      },
                      error: function (xhr, type, errorThrown) {
                        //异常处理；
                        //mui.toast("网络异常，请检测网络是否正常");
                      }
                    })

                  }
                }, 'json');

              }
            }, 1000);
        }


        //点击选择打印机事件
        mui("#diva").on("tap", "#a", function () {
          mui.openWindow({
            url: './set_printer.html',
            id: 'printer'
          })
        })


      });


    //获取店铺信息
    let token = localStorage.getItem("access_token");
    axios.post(HOST + "/Shop/index", { "access_token": token }).then((res) => {
      res = res.data
      if (res.result == 'success') {
        this.shopObj = res.data
        this.shopInfo = res.data.shop_info
        this.shopStatus = res.data.shop_info.open_status == 'y' ? true : false
        this.shopStatusStr = res.data.shop_info.open_status == 'y' ? '营业中' : '休息中'
      } else {
        Toast({
          message: res.message,
          position: 'bottom',
          duration: '2000'
        })
      }
    })

    this.initScroll();

  },
  methods: {
    changeStatus() {
      let token = localStorage.getItem("access_token");
      let status = this.shopStatus == true ? 'y' : 'n'
      axios.post(HOST + "/Shop/update_status", { "access_token": token, "open_status": status }).then((res) => {
        res = res.data
        if (res.result == 'success') {
          this.shopStatus = !this.shopStatus
          if (this.shopStatus) {
            this.shopStatusStr = '营业中'
          } else {
            this.shopStatusStr = '休息中'
          }
        } else {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: '2000'
          })
        }
      })
    },
    toexit() {
      exit();
      window.location.href = "login.html"
      //this.$router.push({ path: '/login' })
    },
    searchCW() {
      let token = localStorage.getItem("access_token");
      let start = this.startdate;
      let end = this.enddate;
      if (start != '' && end != '') {
        axios.post(HOST + "/Shop/finance", {
          "access_token": token,
          "start_time": start,
          "end_time": end
        }).then((res) => {
          res = res.data
          if (res.result == 'success') {
            this.zMoney = res.data.fee
          }
        })
      } else {
        Toast({
          message: '查询时间不能为空',
          position: 'bottom',
          duration: 2000
        });
      }

    },
    showCalendar(style) {
      this.status = style;
      this.calendarShow = true;
    },
    selectedHandler(date) {
      this.calendarShow = false;
      if (this.status == 1) {
        this.startdate = date;
      } else {
        this.enddate = date
      }
    },
    initScroll() {
      if (this.contentScroll) {
        this.contentScroll.refresh();
      } else {
        this.contentScroll = new BScroll(this.$refs.askWrapper, {
          probeType: 3,
          click: true
        });
      }
      this.contentScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));

        //console.log("====scrollY" + this.scrollY)
      });
      this.contentScroll.on('touchend', (pos) => {
        // 下拉动作
        if (pos.y > 50) {
          //console.log('xiala')
        }
      });
      this.contentScroll.on('scrollEnd', () => {
        // 滚动到底部
        if (this.contentScroll.y <= (this.contentScroll.maxScrollY + 50)) {
          //console.log('shang')
          //this.loadData();
        }
      })
    },

  },
  components: {
    selectPicker,
    Calendar
  }

}
</script>

<style lang="stylus">
  .mar-top15
    margin-top: 15px

  hr
    margin: 0
    color: #ccc
    background: #ccc

  .shop
    background: #f2f2f2
    height: 100%
    width: 100%
    position: absolute
    top: 0
    left: 0
    .wrapper
      width: 100%
      height: 60%
      .content
        margin-bottom: 100px
        .item
          background: #fff
          margin-top: 2px
          color: #333
          .mint-cell
            min-height 40px
        .caiwu
          background: #fff
          margin-top: 2px
          color: #333
          .mint-cell
            border-bottom: 1px solid #f1f1f1
          .select-date
            padding: 10px
            p
              font-size: 15px
              line-height: 35px
              border-bottom: 1px solid #f1f1f1
            .date
              height: 25px
              font-size: 14px
          button
            height: 30px
            width: 80%
            margin-left: 10%
            margin-bottom: 10px
          .p-je
            line-height: 35px
            margin: 0 10px
            border-top: 1px solid #f1f1f1
            span
              float: right
              font-size: 18px
              color: #f00
              font-weight: 700
        .shop-data
          margin-top: 100px
          .data-detail
            background: #fff
            border-top: 1px solid #f1f1f1
            display: flex
          .data-cell
            flex: 1
            text-align: center
            margin: 15px 0
            &:last-child
              border-right: none
            h1
              font-size: 14px
              margin-bottom: 8px
            span
              font-size: 16px
              color: #333
              font-weight: 700
            p
              font-size: 12px
              margin-top: 10px
              color: #696969
    .dengc
      padding: 20px 10px
      bottom: 50px
      .mint-button
        width: 100%

    .header
      position: fixed
      top: 0
      left: 0
      width: 100%
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1)
      background-color: #108ee9
      z-index: 8
      color: #666
      display: flex
      padding: 25px
      .h-img-div
        flex: 0 0 55px
        img
          width: 50px
          height: 50px
      .shop-info
        flex: 1
        margin-left: 20px
        color: #fff
        h1
          margin: 10px 0
        a
          font-size: 12px
          color: #d8d8d8
        span
          font-size: 12px
          background: rgba(255, 255, 255, 0.2)
          padding: 5px 25px
          position: absolute
          top: 60px
          right: 30px
          border-radius: 15px

</style>
